<template>
  <div>
    <div id="example">
      <input type="text" v-model="didi" name />
      <input type="text" v-model="family" name />
      <input type="text" v-model="didiFamily" name lazy />
      <br />
      didi={{didi}}, family={{family}}, didiFamily={{didiFamily}}
    </div>
    <cpm>
      <template slot-scope="slot">
        <span v-for="(item,index) in slot.data" :key="index">{{item}}</span>
      </template>
    </cpm>
    <div @click="test">123</div>
    <input type="text" v-model.lazy="value">
    <input v-focus/>
    <button @click="sayHello" v-throttle>提交</button>
<p>{{value}}</p>
  </div>
</template>
<script>
import cpm from "./cpm";
export default {
  components: {
    cpm
  },
  name: "test",
  data() {
    return {
      didi: "didi",
      family: "family",
      value:'hello'
    };
  },
  methods: {
    test() {
      this.$router.push({
        path: "ma"
      });
    },
    sayHello(){
      console.log(123)
    }
  },
  directives:{
    focus:{
      inserted:function(el){
        el.focus()
      }
    }
  },
  beforeRouteEnter(to, from, next) {
     next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        //vm.getData()  // 获取数据
    })
  },
  computed: {
    didiFamily: {
      get: function() {
        console.log(2);
        //this指向vm实例
        return this.didi + "" + this.family;
      },
      set: function(newVal) {
        console.log(1);
        // var names = newVal.split(",");
        // this.didi = names[0];
        // this.family = names[1];
      }
    }
  }
};
</script>
<style>
</style>